<template>
	<view class="container">
		<view class="search-container">
			<input class="search-input" v-model="searchKeyword" placeholder="请输入搜索关键词" />
			<button class="search-button" @click="searchContact">搜索</button>
		</view>
		<view class="contact-list">
			<view class="contact-item" v-for="(contact, index) in sortedContacts" :key="index"
				@click="goToChatPage(contact)">
				<view class="contact-info">
					<view class="contact-name">{{ contact.name }}</view>
					<view class="contact-phone">{{ contact.phone }}</view>
				</view>
				<button class="contact-delete" @click="deleteContact(index)">删除</button>
			</view>
		</view>
		  <input v-model="newContact.name" type="text" placeholder="姓名" />
		  <input v-model="newContact.phone" type="text" placeholder="电话" />
		  <button class="add-contact" @click="addContact">添加联系人</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				contacts: [{
						name: 'aa--Algebra teacher',
						phone: '13888888888'
					},
					{
						name: 'bb--Science teacher',
						phone: '13999999999'
					},
					{
						name: 'ee--Chinese teacher',
						phone: '13666666666'
					},
					{
						name: 'dd--History teacher',
						phone: '13666666666'
					},
					{
						name: 'cc--Teamwork teacher',
						phone: '13666666666'
					},
					{
						name: 'ww--English teacher',
						phone: '13666666666'
					},
					{
						name: 'kk--Rrt teacher',
						phone: '13666666666'
					},
					{
						name: 'ss--Physics teacher',
						phone: '13666666666'
					},
					{
						name: 'qq--Misic teacher',
						phone: '13666666666'
					},
					{
						name: 'll--Computer teacher',
						phone: '13666666666'
					},
					{
						name: 'mm--P.E. teacher',
						phone: '13666666666'
					},
					{
						name: 'nn--Polity teacher',
						phone: '13666666666'
					},
					{
						name: 'ff--Biology teacher',
						phone: '13666666666'
					},
				],
				newContact: {
				        name: '',
				        phone: ''
			    },
				sortedContacts: [],
				searchKeyword: '',
			};
		},
		created() {
			this.sortContacts();
		},
		methods: {
			sortContacts() {
				this.sortedContacts = this.contacts.sort((a, b) => a.name.localeCompare(b.name, 'zh'));
			},
			addContact() {
			      // 确保提供姓名和电话
			      if (this.newContact.name && this.newContact.phone) {
			        // 将新联系人推送到联系人数组
			        this.contacts.push({ ...this.newContact });
			        // 添加联系人后清除输入字段
			        this.newContact.name = '';
			        this.newContact.phone = '';
			        // 添加新联系人后对联系人数组进行排序
			        this.sortContacts();
			      }
			},
			deleteContact(index) {
				this.contacts.splice(index, 1);
				this.sortContacts();
			},
			searchContact() {
				if (this.searchKeyword === '') {
					this.sortContacts();
				} else {
					this.sortedContacts = this.contacts.filter((contact) =>
						contact.name.includes(this.searchKeyword)
					);
				}
			},
			goToChatPage(contact) {
				// 在这里实现跳转到聊天页面的逻辑，可以使用 uni.navigateTo 方法，传递参数给聊天页面
				console.log(contact);
				uni.navigateTo({
					url: '/pages/address_book/chatpage?contact=' + JSON.stringify(contact.name)
				});
			},
		},
	};
</script>
<style scoped>
	.container {
		padding: 20rpx;
	}
	.title {
		font-size: 32rpx;
		text-align: center;
	}
	.search-container {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}
	.search-input {
		flex: 1;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		border-radius: 30rpx;
		border: 1rpx solid #999999;
	}
	.search-button {
		width: 160rpx;
		height: 60rpx;
		line-height: 60rpx;
		margin-left: 10rpx;
		font-size: 28rpx;
		background-color: #007aff;
		color: #ffffff;
	}
	.contact-list {
		margin-top: 20rpx;
	}
	.contact-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}
	.contact-info {
		flex: 1;
	}
	.contact-name {
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}
	.contact-phone {
		font-size: 24rpx;
		color: #999999;
	}
	.contact-delete {
		font-size: 24rpx;
		color: #ff0000;
	}
	.add-contact {
		margin-top: 20rpx;
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 28rpx;
		background-color: #007aff;
		color: #ffffff;
	}
</style>